import {CommonComponentProps} from "../../../../components/editor/interface.ts";
import {useDrag} from "react-dnd";
import FormItem from "antd/es/form/FormItem";
import {TreeSelect} from "antd";
import {CSSProperties} from "react";
import {removeSetter} from "../../../utils/removeSetter.ts";
import {MoveDrop} from "../../../hooks/useMoveDrop.tsx";

export interface TreeSelectProps extends CommonComponentProps {
    id: number;
    name: string;
    styles?: CSSProperties;
    parentId: number;
    children?: any;
    label:any;
    placeholder:string
    treeData:any[]
}

const TreeSelectDev = (props:TreeSelectProps) => {
    const {id,styles,name,treeData} = props;

    const ComponentProps = removeSetter({...props},["children","parentId"])


    const [_, drag] = useDrag({
        type: "TreeSelect",
        item: {
            id,
            type: name,
            dragType: "move"
        }
    })

    return (
        <div className={'relative'} ref={drag} data-component-id={id} style={styles} >
            <MoveDrop key={name} dropComponentId={id} parentId={props.parentId}  />
            <FormItem>
                <FormItem label={props.label} name={props.name} rules={props.rule} style={{margin: "0",...styles}}>
                    <TreeSelect
                        showSearch
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder={props.placeholder}
                        treeData={treeData}
                        {...ComponentProps}

                    />
                </FormItem>
            </FormItem>
        </div>
    );
};

export default TreeSelectDev;